use super::PanelVariant;
use chrono::{Datelike, Months, NaiveDate};
use leptos::{ev,prelude::*};
use leptos_icons::*;
use icondata as i;
use thaw_utils::ArcOneCallback;

#[component]
pub fn QuarterPanel(
    date_panel_show_date: RwSignal<NaiveDate>,
    panel_variant: RwSignal<PanelVariant>,
    close_panel: ArcOneCallback<Option<NaiveDate>>,
) -> impl IntoView {
    let show_date = RwSignal::new(date_panel_show_date.get_untracked());
    let previous_year = move |_| {
        show_date.update(|date| {
            *date = *date - Months::new(12);
        });
    };
    let next_year = move |_| {
        show_date.update(|date| {
            *date = *date + Months::new(12);
        });
    };
    view! {
        <div class="card w-96 shadow-xl bg-base-100">
            <div class="card-body">
                <div class="card-title flex">
                    <div class="flex-none">
                        <button class="btn btn-ghost btn-sm" on:click=previous_year>
                            <Icon icon=i::AiArrowLeftOutlined />
                        </button>
                    </div>
                    <div class="flex-1 items-center text-center">
                        <button class="btn btn-ghost btn-sm" on:click=move |_| panel_variant.set(PanelVariant::Year)>
                            {move || show_date.get().year()}
                        </button>
                    </div>
                    <div class="flex-none">
                        <button class="btn btn-ghost btn-sm" on:click=next_year>
                            <Icon icon=i::AiArrowRightOutlined />
                        </button>
                    </div>
                </div>
                <div class="grid grid-cols-4 gap-1">
                    {(1..=4)
                        .map(|index| {
                            let close_panel=close_panel.clone();
                            let on_click = move |e:ev::MouseEvent| {
                                e.prevent_default();
                                let show_date = show_date.get_untracked();
                                let year=show_date.year();
                                let month=match index {
                                    1 => 1_u32,
                                    2 => 4,
                                    3 => 7,
                                    4 => 10,
                                    _=>1
                                };
                                let new_date=NaiveDate::from_ymd_opt(year, month, 1).unwrap();
                                close_panel(Some(new_date));
                            };
                            view! { <QuarterPanelItem date_panel_show_date index on:click=on_click/> }
                        })
                        .collect_view()}

                </div>
            </div>
        </div>
    }
}

#[component]
fn QuarterPanelItem(date_panel_show_date: RwSignal<NaiveDate>, index: u8 ) -> impl IntoView {
    let is_selected = Memo::new(move |_| {
        let q=match date_panel_show_date.get().month() {
            1 | 2 | 3 => 1_u8,
            4 | 5 | 6 => 2,
            7 | 8 | 9 => 3,
            10 | 11 | 12 => 4,
            _ => 1,
        };
        q==index
    });

    view! {
        <div
            class="btn btn-ghost btn-sm"
            class=("border-violet-700", move || is_selected.get())
        >
            {index}季度
        </div>
    }
}
